<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- Default box -->
            <div class="card card-primary card-outline">
                <div class="card-body">
                    <div id="toolbar" class="btn-group pull-right" style="margin-right: 20px;">
                        <button id="btn_add" type="button" class="btn btn-success">
                            <span class="fa fa-plus" aria-hidden="true"></span> 新增
                        </button>
                    </div>
                    <table id="table" class="table table-hover"></table>
                </div>
                <!-- /.card-body -->
            </div>
        </div>
        <!-- /.card -->
    </div>
</div>


<script>

    //根据窗口调整表格高度
    $(window).resize(function () {
        $('#table').bootstrapTable('resetView', {
            // height: tableHeight()
        })
    });
    $('#table').bootstrapTable({
        contentType: "application/x-www-form-urlencoded",//必须要有！！！！
        url: '/admin/api/role/list',             //请求后台的URL（*）
        method: 'get',                      //请求方式（*）
        toolbar: '#toolbar',                //工具按钮用哪个容器
        striped: true,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,                   //是否显示分页（*）
        dataField: "data",//
        sortable: false,                     //是否启用排序
        sortOrder: "asc",                   //排序方式
        queryParams: 'queryParams',         //传递参数（*）
        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber: 1,                       //初始化加载第一页，默认第一页
        pageSize: 10,                       //每页的记录行数（*）
        pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
        // smartDisplay: false,
        search: false,                      //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
        // strictSearch: true,
        showColumns: true,                 //是否显示所有的列
        showRefresh: true,                 //是否显示刷新按钮
        // minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        height: tableHeight,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        uniqueId: "id",                     //每一行的唯一标识，一般为主键列
        // showToggle: false,                   //是否显示详细视图和列表视图的切换按钮
        // cardView: false,                    //是否显示详细视图
        // detailView: false,                   //是否显示父子表
        queryParamsType: "limit",
        toolbarAlign: "left",
        buttonsAlign: "right",
        locale: "zh-CN",//中文支持
        buttonsClass: "success",
        columns: [
            {
                title: '全选',
                field: '',
                //复选框
                checkbox: true,
                width: 25,
                align: 'center',
                valign: 'middle',
            },
            {
                field: 'id',
                title: "ID",
                // visible: false
            },
            {
                field: 'role_name',
                title: '名称',
            },
            {
                title: '状态',
                field: 'status',
                align: 'center',
                //列数据格式化
                formatter: statusFormatter
            },
            {
                field: '',
                title: '管理',
                halign: 'center',
                align: 'center',
                width: '320px',
                formatter: optionFormatter
            }
        ],                     //列设置
        responseHandler: function (res) {
            //在ajax获取到数据，渲染表格之前，修改数据源
            return res;
        }
    });

    function optionFormatter(value, row, index) {
        let button = '';
        button += '<a class="btn btn-sm btn-warning" href="/admin/role/edit?id=' + row.id + '">修改</a>&nbsp;';
        button += '<a class="btn btn-sm btn-danger" id="delete" href="javascript:void(0)" onclick="deleteRow(' + row.id + ')" data-id=' + row.id + '>删除</a>&nbsp;';
        return button;
    }

    function deleteRow(id) {
        Swal.fire({
            title: '确定删除吗?',
            text: "您将无法恢复它!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: '确定删除!',
            cancelButtonText: '取消删除!',
            // showLoaderOnConfirm: true,
        }).then((result) => {
            if (result.value) {
                $.ajax({
                    url: '/admin/api/role/delete?id=' + id,
                    type: "post",
                    dataType: "json",
                    success: function (res) {
                        if (res.code === 1) {
                            Swal.fire(
                                {
                                    icon: 'success',
                                    title: '已删除！',
                                    text: '删除成功:)',
                                    showConfirmButton: false,
                                    timer: 1500,
                                    timerProgressBar: true,
                                }
                            ).then((r)=>{
                                $("#table").bootstrapTable('refresh');
                            });

                        } else {
                            Swal.fire(
                                {
                                    icon: 'error',
                                    title: '失败！',
                                    text: '删除失败:)',
                                    showConfirmButton: false,
                                    timer: 1500,
                                    timerProgressBar: true,
                                }
                            );
                        }
                    },
                    error: function (d) {
                        Swal.fire(
                            {
                                icon: 'error',
                                title: '失败！' + d.status,
                                text: '服务器错误:)' + d.statusText,
                                showConfirmButton: false,
                                timer: 1500,
                                timerProgressBar: true,
                            }
                        );
                    }
                })
            } else {
                Swal.fire(
                    {
                        icon: 'warning',
                        title: '已取消',
                        showConfirmButton: false,
                        timer: 1500,
                        timerProgressBar: true,
                    }
                );
            }
        });
    }

    //请求服务数据时所传参数
    function queryParams(params) {
        return {
            //每页多少条数据
            limit: params.limit,
            //请求第几页
            page: params.offset / params.limit + 1
        }
    }

    //三个参数，value代表该列的值
    function statusFormatter(value, row, index) {
        if (value === 2) {
            return '<i class="fa fa-lock" style="color:red"></i>'
        } else if (value === 0) {
            return '<i class="fa fa-unlock" style="color:green"></i>'
        } else {
            return '-'
        }
    }

    $('#btn_add').click(function () {
        window.location.href = '/admin/role/create'
    });

    //tableHeight函数
    function tableHeight() {
        //可以根据自己页面情况进行调整
        return $(window).height() - 280;
    }

</script>